<template>
    <div class="job-container"style="margin:20px;">
      <div style="text-align:right;padding-bottom:15px;margin-top: 10px;">
        <el-row>
          <el-col :span="24">
           <!-- <el-menu default-active="1" active-text-color="#42b983" class="el-menu-demo" mode="horizontal">
              <el-menu-item index="1">任务列表</el-menu-item>
            </el-menu>-->
            <el-select v-model="jobQuery.projectId" clearable placeholder="请选择" @change="change">
              <el-option
                v-for="item in projectsList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="jobQuery.cubeId" clearable placeholder="请选择" :disabled="cubeListDisabled">
              <el-option
                v-for="item in cubesList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              @change="changeDate"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :picker-options="endDateOpt"
              :clearable="dateDisabled">
            </el-date-picker>
          </el-col>
        </el-row>

      </div>
      <el-row :gutter="32"style="min-width: 1150px;" >
        <el-col :span="10">
          <div class="job_top">
            <div class="job_left">
              <el-row>
                <el-col :span="16">任务数量</el-col>
                <el-col :span="8"><span>{{jobSurvey.jobNumber}}</span>个</el-col>
              </el-row>
              <el-row>
                <el-col :span="16">平均耗时</el-col>
                <el-col :span="8"><span>{{formatTimes(jobSurvey.jobTimeAvg)}}</span></el-col>
              </el-row>
              <el-row>
                <el-col :span="16">最大耗时</el-col>
                <el-col :span="8"><span>{{formatTimes(jobSurvey.jobTimeMax)}}</span></el-col>
              </el-row>
              <el-row>
                <el-col :span="16">最小耗时</el-col>
                <el-col :span="8"><span>{{formatTimes(jobSurvey.jobTimeMin)}}</span></el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="job_top">
            <div class="job_right">
              <div class="head">任务耗时</div>
              <div class="chart" id="chart">
                <line-chart :chart-data="jobSurvey.kylinJobInfos" theme="shine"></line-chart>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-menu default-active="1" active-text-color="#42b983" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1">任务列表</el-menu-item>
      </el-menu>
      <el-row style="margin: 20px 0 20px 0">
        <el-col>
          <el-autocomplete
            class="inline-input"
            v-model="jobQuery.owner"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            clearable
            @select="jobListQuery"
            v-show="isAdmin">
          </el-autocomplete>
          <el-select v-model="jobQuery.status" clearable placeholder="请选择" @change="jobListQuery">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input style="width: auto;"
                    placeholder="请输入OA账号"
                    prefix-icon="el-icon-search"
                    v-model="jobQuery.cubeOrProjectQuery"
                    @blur="jobListQuery">
          </el-input>

        </el-col>
      </el-row>
      <el-table
        :data="jobList"
        height="250"
        :header-cell-style="{background:'#ebeef5',border:'none'}"
        border
        style="text-align: center;"
        @sort-change='sortChange'>
        <el-table-column
          align="center"
          type="index"
          label="序号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="jobProject"
          label="项目"
          sortable="custom">
        </el-table-column>
        <el-table-column
          align="center"
          prop="jobCube"
          label="cube"
          sortable="custom">
        </el-table-column>
        <el-table-column
          align="center"
          prop="jobTime"
          label="耗时"
          sortable="custom">
          <template slot-scope="scope">
            <span v-if="scope.row.jobTimeThreshold === 0">{{formatterTime(scope.row,scope.column)}}</span>
            <span v-else style="color: red">{{formatterTime(scope.row,scope.column)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="jobWaitTime"
          :formatter="formatterTime"
          label="MR等待耗时"
          sortable="custom">
        </el-table-column>
        <el-table-column
          align="center"
          prop="jobStatus"
          label="状态"
          sortable="custom">
        </el-table-column>
        <el-table-column
          align="center"
          prop="jobStartTime"
          label="开始时间"
          sortable="custom">
        </el-table-column>
        <el-table-column
          align="center"
          prop="jobEndTime"
          label="结束时间"
          sortable="custom">
        </el-table-column>
        <el-table-column
          align="center"
          label="详情">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleInfo(scope.$index, scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="20" style="margin: 0">
        <el-col :span="12" :offset="6">
          <el-pagination style="margin: 0 auto;"
                         @current-change="handleCurrentChange"
                         :page-size="10"
                         layout="total, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
</template>
<script>
  import commonApi from '@/api/kylin/common'
  import LineChart from './components/LineChart'
  import jobApi from '@/api/kylin/job'
  import dateApi from '@/api/kylin/date'

  export default {
    name: 'job',
    components: {
      LineChart
    },
    data() {
      return {
        jobSurvey: {
          jobNumber: 0,
          jobTimeAvg: null,
          jobTimeMax: null,
          jobTimeMin: null,
          kylinJobInfos: null
        },
        jobQuery: {
          projectId: '',
          cubeId: '',
          startDate: '',
          endDate: '',
          owner: '',
          status: '',
          orderBy: '',
          cubeOrProjectQuery: '',
          sort: '',
          page: 1,
          limit: 10
        },
        dateRange: ['2018-07-01', '2018-08-10'],
        projectsList: [],
        cubesList: [],
        cubeListDisabled: true,
        jobList: [],
        statusList: [
          {
            label: 'NEW(新建)',
            value: 'NEW'
          },
          {
            label: 'PENDING(准备运行)',
            value: 'PENDING'
          },
          {
            label: 'RUNNING(运行中)',
            value: 'RUNNING'
          },
          {
            label: 'STOPPED(停止)',
            value: 'STOPPED'
          },
          {
            label: 'ERROR(错误)',
            value: 'ERROR'
          },
          {
            label: 'FINISHED(完成)',
            value: 'FINISHED'
          }
        ],
        dateDisabled: false,
        isAdmin: false,
        owners: [],
        total: 10,
        endDateOpt: {
          disabledDate: (time) => {
            var date = new Date()
            date.setMonth(date.getMonth() - 3)
            return time.getTime() < (date - 8.64e6) || time.getTime() > (Date.now() - 8.64e6)
          }
        }
      }
    },
    methods: {
      handleInfo(index, row) {
        this.$router.push({ path: '/kylin/job/info?id=' + row.jobId })
      },
      handleCurrentChange(val) {
        this.jobQuery.page = val
        this.jobListQuery()
      },
      querySearch(queryString, cb) {
        var owners = this.owners
        var results = queryString ? owners.filter(this.createFilter(queryString)) : owners
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter(queryString) {
        return (owners) => {
          return (owners.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      sortChange(column) {
        this.jobQuery.orderBy = column.prop
        if (column.order === 'descending') {
          column.order = 'desc'
        } else if (column.order === 'ascending') {
          column.order = 'asc'
        }
        this.jobQuery.sort = column.order
        this.jobListQuery()
      },
      changeDate() {
        this.jobQuery.startDate = this.dateRange[0]
        this.jobQuery.endDate = this.dateRange[1]
        this.jobSurveyQuery()
      },
      jobSurveyQuery() {
        var _this = this
        jobApi.jobSurvey(this.jobQuery).then(resp => { _this.jobSurvey = resp.data })
        _this.jobListQuery()
      },
      jobListQuery() {
        var _this = this
        jobApi.jobList(this.jobQuery).then(resp => {
          _this.jobList = resp.data.records
          _this.total = resp.data.total
        })
      },
      change() {
        var _this = this
        if (this.jobQuery.projectId != null && this.jobQuery.projectId !== '') {
          commonApi.cubes(this.jobQuery.projectId).then(resp => { _this.cubesList = resp.data })
          commonApi.owners(this.jobQuery.projectId).then(resp => { _this.owners = resp.data })
          _this.cubeListDisabled = false
        } else {
          _this.jobQuery.owner = null
          _this.cubeListDisabled = true
          _this.owners = []
        }
        this.jobSurveyQuery()
      },
      formatterTime(row, column) {
        var timeLong = row[column.property]
        return dateApi.formatTime(timeLong, 's')
      },
      formatTimes(str) {
        return dateApi.formatTime(str, 's')
      }
    },
    filters: {
      formatDate(time) {
        var date = new Date(time)
        return dateApi.formatDate(date, 'yyyy-MM-dd')
      }
    },
    created: function() {
      var _this = this
      commonApi.projects().then(resp => { _this.projectsList = resp.data })
      commonApi.cubes().then(resp => { _this.cubesList = resp.data })
      commonApi.currentUser().then(resp => { _this.isAdmin = resp.data.admin })
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
      _this.dateRange = [start, end]
      _this.changeDate()
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  body {
    background-color: #fff;
  }

  .job_top {
    border: 1px solid #E8E8E8;
    border-radius: 5px;
    min-width: 475px;
    height:280px;
  .job_left {
    padding: 20px;
    background-color: #d7d7d7;
    min-width: 420px;
    margin: 30px 15px 30px 15px;
    .el-row {
      margin-bottom: 20px;
      span{
        font-size: 22px;
      }
  }
  }

  .job_right {
    margin: 15px;
    .head{
      font-weight: bold;
    }
    .chart {
      height: 80%;
      width: 100%;
    }
  }
  .el-menu-demo{
    margin: 20px 0 20px 0;
  }

  }

</style>
